<!-- 账户管理界面 -->
<template>
	<div class="MyContainer">
		<el-form label-width="90px">
			<el-form-item label="用户名："> {{ name }} </el-form-item>
			<el-form-item label="旧密码：">
				<el-input type="password" v-model="form.old" placeholder="111"></el-input>
			</el-form-item>
			<el-form-item label="新密码：">
				<el-input type="password" v-model="form.new" placeholder="111"></el-input>
			</el-form-item>
			<el-row class="mb-4" justify="center">
            	<el-button type="primary" size="large" @click="save">保存</el-button>
          	</el-row>
		</el-form>
	</div>
</template>

<script setup lang="ts" name="user">
import { reactive, ref } from 'vue';
import 'cropperjs/dist/cropper.css';
import { ElMessage , ElMessageBox} from 'element-plus'
import { changeCusPsw } from '../../api/manager';
import type { Action } from 'element-plus'
import { useGlobleStore } from '../../store/globle';

const globle = useGlobleStore()
const name = globle.getUsrname()
const form = reactive({
  old: '',
  new: '',
});

//点击保存之后的弹窗提示
const save=()=>{
  console.log('form',form)
 
  var data = {
    oldPswd:form.old,
    newPswd:form.new
  }

  changeCusPsw(data)
  .then(res =>{
    //console.log('res:',res);
    if(res.code==200){
      //succ
      ElMessageBox.alert('密码修改成功', '修改密码', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action: Action) => {
          ElMessage({
            type: 'success',
            message: '成功！',
          })
        },
      })
    }
    else if(res.code==401){
      //旧密码错误
      ElMessageBox.alert('密码修改失败：请检查输入的旧密码', '修改密码', {
        confirmButtonText: 'OK',
      })
    }
  }).catch(err=>{
    //报错
    //console.log('err:',err);
    ElMessageBox.alert('密码修改失败：请检查网络', '修改密码', {
      confirmButtonText: 'OK',
    })
  })
}
</script>

<style scoped>

</style>
